<template>
    <div class="box tileAdjustmentBox">
        瓦片图层移动(只适合小范围内的偏移，笛卡尔坐标系方向)
        <br />
        <br />
        <div class="modelUrl">模型URL：<el-input v-model="$store.state.tileAdjustmentData.url" placeholder="请输入内容"></el-input></div>
        <br />
        <div class="modelUrl">当前层级：{{ mapLevel }}</div>
        <br />
        移动步长：<el-button v-for="(cc, index) in clist" :key="cc.name" :type="c === clist[index].value ? 'info' : ''" @click="setc(cc.value)">
            {{ cc.name }}
        </el-button>
        <br />
        <br />
        移动方向：<el-button v-for="(yy, index) in ylist" :key="yy" @click="sety(yy)">{{ yy }}</el-button>
        <br />
        <br />
        <div class="modelUrl">
            <span>当前偏移量：</span>
            <div class="showsdata">
                <div>L{{ mapLevel }}</div>
                <div>X：20</div>
                <div>Y：-3</div>
            </div>
        </div>
        <br />
        <div class="btnbox">
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button type="info" @click="seveData">应用</el-button>
        </div>
    </div>
</template>
<script>
import editorware from '../utils/editorMiddleware'
export default {
    name: 'tileAdjustment',
    data() {
        return {
            input: '',
            clist: [
                {
                    name: '1',
                    value: 1
                },
                {
                    name: '10',
                    value: 10
                }
            ],
            c: 10,
            ylist: ['x+', 'x-', 'y+', 'y-'],
            dlist: [],
            ifMovement: false,
            mapLevelGetFun: null,
            mapLevel: 0,
            tipBox: false
        }
    },
    computed: {
        amendName() {
            return this.$store.state.amendName
        },
        amendId() {
            return this.$store.state.amendId
        },
        coverageUrl() {
            return this.$store.state.tileAdjustmentData.url
        }
    },
    mounted() {
        this.mapLevelGetFun = setInterval(() => {
            this.mapLevel = map.level
            console.log(map.level)
        }, 1000)
    },
    wathc: {
        // mapLevel(newdata) {
        //     console.log(newdata)
        // }
    },
    methods: {
        setc(cc) {
            if (this.tipBox) {
                return
            }
            this.c = cc
        },
        sety(yy) {
            if (this.tipBox) {
                return
            }
            let datas = editorware.coverageMap.get(this.amendId)
            // console.log(datas.tifDataSet)
            this.dlist = JSON.parse(datas.tifDataSet)
            this.dlist.forEach(v => {
                // console.log(editorware.coverageMap.get(v.url))
                let layer = editorware.coverageMap.get(v.url)
                let options = layer.options
                if (yy == 'x+') {
                    options.rectangle.xmax = Number(options.rectangle.xmax) + this.c
                    options.rectangle.xmin = Number(options.rectangle.xmin) + this.c
                    v.maxLongitude = Number(options.rectangle.xmax) + this.c
                    v.minLongitude = Number(options.rectangle.xmin) + this.c
                } else if (yy == 'x-') {
                    options.rectangle.xmax = Number(options.rectangle.xmax) - this.c
                    options.rectangle.xmin = Number(options.rectangle.xmin) - this.c
                    v.maxLongitude = Number(options.rectangle.xmax) - this.c
                    v.minLongitude = Number(options.rectangle.xmin) - this.c
                } else if (yy == 'y+') {
                    options.rectangle.ymax = Number(options.rectangle.ymax) + this.c
                    options.rectangle.ymin = Number(options.rectangle.ymin) + this.c
                    v.maxLatitude = Number(options.rectangle.ymax) + this.c
                    v.minLatitude = Number(options.rectangle.ymin) + this.c
                } else if (yy == 'y-') {
                    options.rectangle.ymax = Number(options.rectangle.ymax) - this.c
                    options.rectangle.ymin = Number(options.rectangle.ymin) - this.c
                    v.maxLatitude = Number(options.rectangle.ymax) - this.c
                    v.minLatitude = Number(options.rectangle.ymin) - this.c
                }
                layer.setOptions(options)
            })
            this.ifMovement = true
        },
        cancel() {
            if (this.tipBox) {
                return
            }
            if (this.ifMovement) {
                this.$alert('此操作图像会恢复到原来位置，并且不会保存数据！', '', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$store.commit('setTileAdjustment', false)
                        let datas = editorware.coverageMap.get(this.amendId)
                        let dlist = JSON.parse(datas.tifDataSet)

                        dlist.forEach(v => {
                            let layer = editorware.coverageMap.get(v.url)
                            let options = layer.options
                            options.rectangle.xmax = Number(v.maxLongitude)
                            options.rectangle.xmin = Number(v.minLongitude)
                            options.rectangle.ymax = Number(v.maxLatitude)
                            options.rectangle.ymin = Number(v.minLatitude)

                            layer.setOptions(options)
                        })
                    }
                })
            } else {
                this.$store.commit('setTileAdjustment', false)
            }
        },
        seveData() {
            this.tipBox = true
            this.$alert('确定需要移动当前瓦片图层么？', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') {
                        // 确定
                    } else {
                        // 取消或关闭弹窗
                    }
                    console.log(action)
                    this.tipBox = false
                }
            })

            // let datas = editorware.coverageMap.get(this.amendId)
            // // console.log(JSON.stringify(this.dlist))
            // console.log(datas)
            // console.log(JSON.stringify(this.dlist))
            // this.$request.postForm('/api/map/draw/modifyTifDataSet', { drawId: datas.id, tifDataSet: JSON.stringify(this.dlist) }).then(res => {
            //     if (res.code == 200) {
            //         this.$message.success('修改成功')
            //         this.ifMovement = false
            //         this.$store.commit('setSkewingAmend', false)
            //     } else {
            //         this.$message.error('修改失败，请稍后再试')
            //         let dlist = JSON.parse(datas.tifDataSet)
            //         dlist.forEach(v => {
            //             let layer = editorware.coverageMap.get(v.url)
            //             let options = layer.options
            //             options.rectangle.xmax = Number(v.maxLongitude)
            //             options.rectangle.xmin = Number(v.minLongitude)
            //             options.rectangle.ymax = Number(v.maxLatitude)
            //             options.rectangle.ymin = Number(v.minLatitude)

            //             layer.setOptions(options)
            //         })
            //         this.ifMovement = false
            //     }
            // })
        }
    },
    destroyed() {
        clearInterval(this.mapLevelGetFun)
    }
}
</script>
<style scoped lang="scss">
.box {
    position: absolute;
    width: 402px;
    // height: 200px;
    border: 1px solid rgba(32, 160, 255, 0.3);
    right: 10px;
    top: 48px;
    padding: 10px 20px;
    z-index: 3333;
    background: rgba(30, 36, 50, 0.6);
    border-radius: 5px;
    color: #fff;
    .modelUrl {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap;
        span {
            margin-left: -13px;
        }
        .showsdata {
            display: flex;
            justify-content: space-between;
            align-items: center;
            white-space: nowrap;
            width: 100%;
            // div {
            //     width: 30%;
            // }
        }
    }
    button {
        width: 60px;
        // margin-right: 10px !important;
        // cursor: pointer;
        // margin-bottom: 20px;
        .active {
            background: green;
        }
    }
    .btnbox {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
</style>
<style>
.el-message-box__title {
    color: #ffffff;
    font-size: 14px;
}
</style>
